<template>
  <view class="relative">
    <!-- <view
        id="container"
        v-if="isManagerOrAdmin"
        :style="{top:`${top}px`}"
        class="sticky"
    > -->
    <!--骨架屏-->
    <!-- <view class="flex justify-center align-center pt-50 pb-25 bg-fff" v-if="loading">
        <view class="w-160 h-60 br-5 z-9 bg-CCCCCC"></view>
        <view class="w-30 h-5 m-lr-20 z-9"></view>
        <view class="w-160 h-60 br-5 fz-30 z-9 bg-CCCCCC"></view>
        <view class="w-30 h-5 m-lr-20 z-9"></view>
        <view class="w-160 h-60 br-5 fz-30 z-9 bg-CCCCCC"></view>
      </view>
      <view class="flex justify-center align-center pt-50 pb-25 bg-fff" v-else>
        <view
            :class="[active == 1 ? 'active' : 'disActive']"
            class="w-160 lh-60 text-center br-5 fz-30 z-9 border-box border-2D8CF0"
            @tap="activeChange(1)"
        >
          <text>当日</text>
        </view>
        <view class="w-30 h-5 bg-2D8CF0 m-lr-20 z-9"></view>
        <view
            :class="[active == 2 ? 'active' : 'disActive']"
            class="w-160 lh-60 text-center br-5 fz-30 z-9 border-box border-2D8CF0"
            @tap="activeChange(2)"
        >
          <text>近三日</text>
        </view>
        <view class="w-30 h-5 bg-2D8CF0 m-lr-20 z-9"></view>
        <view
            :class="[active == 3 ? 'active' : 'disActive']"
            class="w-160 lh-60 text-center br-5 fz-30 z-9 border-box border-2D8CF0"
            @tap="activeChange(3)"
        >
          <text>全部</text>
        </view>
      </view> -->
    <!-- </view> -->
    <!--骨架屏-->
    <list-skeleton v-if="loading && fixList.length===0">
      <slot>
        <view class="w-350 h-45 mt-10 bg-f4f7f4"></view>
      </slot>
    </list-skeleton>
    <!-- :style="{ minHeight: `calc(100vh - ${top}px - ${safeAreaInsets}px - 338rpx)` }" -->
    <view class="mt-50">
      <view v-if="fixList.length>0">
        <view class="m-lr-20 mb-30 pl-20 p-tb-12 flex align-center justify-between bg-E9F8FF br-10"
          v-for="item in fixList" :key="item.workOrderId" @tap.stop="clickItem(item)">
          <view class="flex w-full justify-between align-center">
            <view class="flex flex1 flex-column oh">
              <text class="fz-40 font-bold lh-56 mt-12 text-ellipsis">{{ item.deviceName || '-' }}</text>

              <view class="mt-20 fz-28" v-if="item.status === statusList[0]">
                报修人：{{ item.initiator }}
              </view>
              <view class="mt-20 fz-28" v-else>
                维修工程师：{{ item.repairStaff }}
              </view>
              <view class="mt-20 fz-28">
                报修时间：{{ item.createTime }}
              </view>
              <view class="fz-28 mt-20" v-if="item.status !== statusList[0]">
                维修开始时间：{{ item.startTime }}
              </view>
            </view>

            <view class="relative mr-30">
              <CustomCircleProgress :border-width="8" :size="128" :percent="getOrderPercentage(item.status)"
                :active-color="getOrderStatusColor(item.status)">
                <view class="h-full w-full lh-center color-333333">
                  <text class="fz-30" :style="{ color: getOrderStatusColor(item.status) }">{{ getStatusName(item.status)}}</text>
                </view>
              </CustomCircleProgress>
            </view>

          </view>
        </view>
      </view>
      <empty-icon v-else></empty-icon>
    </view>
    <!-- </view> -->
  </view>
</template>

<script>
import { receivedList } from "@/api/repair/workOrder";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import ListSkeleton from "../../components/ListSkeleton";
import CustomCircleProgress from '../../components/CustomCircleProgress'
import { REP_WORK_ORDER_STATUS } from "@/utils/dict"

const StatusValueList = [
  REP_WORK_ORDER_STATUS.TO_ACCEPT,
  REP_WORK_ORDER_STATUS.SEEK_HELP,
]

export default {
  name: "FixUnreceive",
  components: { ListSkeleton, EmptyIcon, CustomCircleProgress },
  props: ['isManagerOrAdmin'],
  data () {
    return {
      hasNext: false,
      pageNum: 1,
      pageSize: 10,
      // endDate: '',
      // startDate: '',
      // active: 1, //1, 当日 2 近三日激活 3 全部激活
      fixList: [],
      isAllowDistribution: false,//是否允许点击分配
      batchInfo: {},
      loading: false,
      // safeAreaInsets: 0, //底部安全区高度,

    }
  },

  created () {
    //默认展示当日
    // this.startDate = dayjs().format('YYYY-MM-DD')
    // this.endDate = dayjs().format('YYYY-MM-DD')
    this.doQuery().then(res => {
      this.hasNext = res.hasNext
      this.fixList = res.rows || []
    }).finally(() => {
      this.loading = false
    })
  },
  computed: {
    statusList () {
      return StatusValueList.map(item => item.value)
    }
  },
  watch: {
  },
  methods: {
    getOrderPercentage (status) {
      switch (status) {
        case this.statusList[0]: return 0
        case this.statusList[1]: return 100
        default: return 0
      }
    },
    getOrderStatusColor (status) {
      switch (status) {
        case this.statusList[0]: return ''
        case this.statusList[1]: return '#FF6262'
        default: return ''
      }
    },
    getStatusName (status) {
      const result = StatusValueList.find(item => item.value == status)
      return result ? result.label : ''
    },
    show () {
      this.pageNum = 1
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.fixList = res.rows || []
      }).finally(() => {
        this.loading = false
      })
    },
    hide () {
      this.loading = true
    },
    reachBottom () {
      if (this.hasNext) {
        this.pageNum++
        this.doQuery().then(res => {
          this.hasNext = res.hasNext
          this.fixList = this.fixList.concat(res.rows || [])
        }).finally(() => {
          this.loading = false
        })
      }
    },
    doQuery () {
      this.loading = true
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        statusList: this.statusList.join(","),
      }
      return receivedList(params).then(res => {
        return Promise.resolve(res)
      }).catch(() => {
        this.loading = false
      })
    },
    clickItem (item) {
      this.loading = true
      this.$tab.navigateTo('/pages/repair/fix-receive-order-detail?workOrderId=' + item.workOrderId + '&hospitalId=' + item.hospitalId + '&status=' + item.status)
    },
  }
}
</script>

<style lang="scss" scoped>
.active {
  background-color: #2d8cf0;
  color: #fff;
}

.disActive {
  color: #2d8cf0;
  background-color: #fff;
}
</style>
